<template>
<div class="box-padding">
    <Form label-position="right" :label-width="100">
        <div class="role-title">{{ $route.params.name }}</div>
    <div class="add-edit-detail-box">
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="12">
            <FormItem label="项目名称" :required="$route.params.type == 'details' ? false : true">
                <Select v-model="ledgerObj.projectId" clearable :disabled="$route.params.type == 'details' ? true : false" @on-change="projectTypeList">
                <Option v-for="item in projectList" :value="item.id" :key="item.id">{{ item.shortName }}</Option>
            </Select>
            </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="12">
            <FormItem label="编号" :required="$route.params.type == 'details' ? false : true">
                <Input v-model="ledgerObj.code" placeholder="请输入编号" 
            :disabled="$route.params.type != 'add' ? true : false" />
            </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="12">
            <FormItem label="名称" :required="$route.params.type == 'details' ? false : true">
                <Input v-model="ledgerObj.name" placeholder="请输入名称" 
            :disabled="$route.params.type == 'details' ? true : false" />
            </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger" v-if="isShowprofession">
            <Col span="12">
                <FormItem label="专业类型" :required="$route.params.type == 'details' ? false : true">
                    <Input v-model="ledgerObj.professionalType" v-if="$route.params.type == 'details'" :disabled="$route.params.type == 'details' ? true : false" />
                    <Select v-model="ledgerObj.professionalType" v-if="$route.params.type != 'details'" @on-open-change="projectTypeList" not-found-text="暂无专业类型" ref="treeSelectWbs" placeholder="请选择" :disabled="$route.params.type == 'details' ? true : false">
                        <Option v-for="item in list1" :value="item.code" :key="item.code" style="display: none;">{{ item.title }}</Option>
                        <Tree :data="wbsList" ref="Tree" :load-data="loadData" style="padding-left:20px" @on-select-change="checkWbs"></Tree>
                    </Select>
                </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="12">
            <FormItem label="风险类型">
                <Input v-model="ledgerObj.riskTypeName" v-if="$route.params.type == 'details'" :placeholder="$route.params.type != 'details' ? '请选择风险类型' : ''" :disabled="$route.params.type == 'details' ? true : false" />
                <Select v-model="ledgerObj.riskType" ref="treeRiskType" v-if="$route.params.type != 'details'" placeholder="请选择风险类型" :disabled="$route.params.type == 'details' ? true : false">
                    <Option v-for="item in treeRiskType" :value="item.id" :key="item.id" style="display: none;">{{ item.title }}</Option>
                    <Tree :data="treeRiskTypeData" style="padding-left:20px" @on-select-change="checkData"></Tree>
                </Select>
            </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="12">
                <FormItem label="风险等级" :required="$route.params.type == 'details' ? false : true">
                    <Select v-model="ledgerObj.distRiskGrade" clearable :disabled="$route.params.type == 'details' ? true : false">
                        <Option v-for="item in leveList" :value="item.code" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="6">
            <FormItem label="开始时间" :required="$route.params.type == 'details' ? false : true">
                <DatePicker v-model="ledgerObj.startTime" type="date" 
                    placeholder="请选择开始时间"
                    :value="startTime"
                    @on-change="handleChangeStartTime"
                    :disabled="$route.params.type == 'details' ? true : false"></DatePicker>
            </FormItem>
            </Col>
            <Col span="6">
            <FormItem label="结束时间" :required="$route.params.type == 'details' ? false : true">
                <DatePicker v-model="ledgerObj.endTime" type="date"
                    placeholder="请选择结束时间" 
                    :value="endTime"
                    @on-change="handleChangeEndTime"
                    :disabled="$route.params.type == 'details' ? true : false"></DatePicker>
            </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="12">
            <FormItem label="风险描述">
                <Input v-model="ledgerObj.note" type="textarea" :rows="4" placeholder="请输入描述" 
            :disabled="$route.params.type == 'details' ? true : false" />
            </FormItem>
            </Col>
        </Row>
    </div>
    <div class="role-bottom" v-show="$route.params.type != 'details'">
        <Button type="primary" @click="ledgerEdit">保存</Button>
        <Button style="margin-left:20px;" @click="closetab">取消</Button>
    </div>
    </Form>
    
</div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {
    mapMutations
} from 'vuex'
import crudMixin from '../../../mixins/crudMixin'
export default {
    components: {
        Treeselect
    },
    mixins: [crudMixin],
    data() {
        return {
            value: null,
            cityList: [],
            list1: [],
            model1: '',
            projectId: '',
            ledgerObj: {
                professionalType: null,
                startTime:'',
                endTime:''
            },
            treeRiskTypeData: [], //风险类型树
            treeRiskType:[],
            isShowprofession:true,
            startTime:'',
            endTime:''
        }
    },
    watch: {},
    created(){
        this.getRiskType() //获取风险类型
    },
    mounted() {
        this.isExistWBS()  //判断是否需要专业类型
        this.projectGetAll()
        this.dictTypeList('RISK_GRADE')
        this.getRiskCategoryFindAll()
        this.getUserDefaultProject()
        if (this.$route.params.type != 'add' && this.$route.params.id) {
            this.ledgerDetail()
        }
    },
    methods: {
        ...mapMutations(['closeTag']),
        handleChangeStartTime(value){
            this.ledgerObj.startTime = value
        },
        handleChangeEndTime(value){
            this.ledgerObj.endTime = value
        },
        //判断是否需要专业类型
        isExistWBS(){
            this.$api.WorkstationLedger.existWBS().then(res => {
                if (res.code == 200) {
                    this.isShowprofession = res.data
                } else {
                    this.$Message.warning(res.message)
                }
            })
        },
        //默认显示的项目
        getUserDefaultProject() {
            this.$api.UnitProject.userDefaultProject().then(res => {
                if (res.code == 200) {
                    this.ledgerObj.projectId = res.data.id
                    // code码生成
                    if(this.$route.params.type == 'add'){
                        this.getCodeByProjectId()
                    }
                } else {
                    this.$Message.error(res.data.msg)
                }
            })
        },
        //获取风险类型
        getRiskType() {
            this.$api.WorkstationLedger.riskTypeTree().then(res => {
                if (res.code == 200) {
                    res.data.forEach(item => {
                        item.title = item.name
                        if (item.children.length > 0) {
                            item.children = this.changeRishTypeName(item.children)
                        }
                    })
                    this.treeRiskTypeData = res.data
                    // this.treeRiskType = res.data
                } else {
                    this.$Message.warning(res.message)
                }
            })
        },
        changeRishTypeName(data) {
            if (data) {
                let item = data
                const arr = []
                item.forEach(val => {
                    let obj = {}
                    obj.title = val.name
                    obj.id = val.id
                    obj.children = []
                    if (val.children.length > 0) {
                        obj.children = this.changeRishTypeName(val.children)
                    }
                    arr.push(obj)
                })
                return arr
            }
        },
        // 编辑关闭/取消
        closetab() {
            this.closeTag({
                name: this.$route.params.type == 'add' ? 'ledger-add' : this.$route.params.type == 'edit' ? 'ledger-edit' : 'ledger-detail',
                params: {
                    name: this.$route.params.name,
                    id: this.$route.params.id,
                    type: this.$route.params.type
                }
            })
        },
        checkWbs(data) {
            this.list1 = []
            let code = data[0].code
            let title = data[0].title
            this.list1.push({
                code,
                title
            })
            this.ledgerObj.professionalType = code
            this.ledgerObj.professionalTypeName = title
            this.$refs.treeSelectWbs.visible = false
        },
        checkData(data){
            this.treeRiskType = []
            this.ledgerObj.riskType = data[0].id
            this.ledgerObj.riskTypeName = data[0].title
            this.treeRiskType.push({
                id:data[0].id,
                title:data[0].title
            })
            this.$refs.treeRiskType.visible = false
        },
        // 工点详情
        ledgerDetail() {
            if (this.$route.params.name === '日志详情') {
                this.$api.operationLog
                    .getOperationLogDetail(this.$route.params.id)
                    .then(res => {
                        if (res.code === 200) {
                            let data = JSON.parse(res.data.params)
                            data.startTime = this.$time(
                                new Date(data.startTime),
                                'yyyy-MM-dd'
                            )
                            data.endTime = this.$time(
                                new Date(data.endTime),
                                'yyyy-MM-dd'
                            )
                            this.ledgerObj = {
                                ...data
                            }
                            this.ledgerObj.professionalType = data.professionalTypeName
                            this.list1 = [{
                                code: data.professionalType,
                                title: data.professionalTypeName
                            }]
                            this.treeRiskType = [{
                                id: data.riskType,
                                title: data.riskTypeName,
                            }]
                        } else {
                            this.$Message.error(res.message)
                        }
                    })
            } else {
                this.$api.WorkstationLedger.ledgerDetail(this.$route.params.id).then(
                    resp => {
                        if (resp.code == 200) {
                            resp.data.startTime = this.$time(
                                new Date(resp.data.startTime),
                                'yyyy-MM-dd'
                            )
                            resp.data.endTime = this.$time(
                                new Date(resp.data.endTime),
                                'yyyy-MM-dd'
                            )
                            this.ledgerObj = resp.data
                            this.ledgerObj.professionalType = resp.data.professionalTypeName
                            this.list1 = [{
                                code: resp.data.professionalType,
                                title: resp.data.professionalTypeName
                            }]
                            this.treeRiskType = [{
                                id: resp.data.riskType,
                                title: resp.data.riskTypeName,
                            }]
                        } 
                        // else {
                        //     this.$Message.warning(resp.message)
                        // }
                    }
                )
            }
        },
        // 修改/添加
        ledgerEdit() {
            if (!this.ledgerObj.projectId) {
                this.$Message.warning("项目名称不能为空！");
                return;
            }
            if (this.ledgerObj.code.length > 30) {
                this.$Message.warning("工点编号不能超过30个字符！");
                return;
            }
            if (this.ledgerObj.code && !this.$regex.numberAndEnglishRegEx(this.ledgerObj.code)) {
                this.$Message.warning("工点编号只能包含英文字母和数字！");
                return;
            }
            if (!this.ledgerObj.name) {
                this.$Message.warning("工点名称不能为空！");
                return;
            }
            if (this.ledgerObj.name.length > 60) {
                this.$Message.warning("工点名称不能超过60个字符！");
                return;
            }
            if (this.isShowprofession && !this.ledgerObj.professionalType) {
                this.$Message.warning("专业类型不能为空！");
                return;
            }
            // if (!this.ledgerObj.riskType) {
            //     this.$Message.warning("风险类型不能为空！");
            //     return;
            // }
            if (!this.ledgerObj.distRiskGrade) {
                this.$Message.warning("风险等级不能为空！");
                return;
            }
            if (!this.ledgerObj.startTime) {
                this.$Message.warning("开始时间不能为空！");
                return;
            }
            if (!this.ledgerObj.endTime) {
                this.$Message.warning("结束时间不能为空！");
                return;
            }
            if (this.ledgerObj.note && this.ledgerObj.note.length > 500) {
                this.$Message.warning("风险描述不能超过500个字符！");
                return;
            }
            if (this.$route.params.type == 'edit') {
                this.$api.WorkstationLedger.ledgerEdit(this.ledgerObj).then(resp => {
                    if (resp.code == 200) {
                        this.$Message.success('修改成功')
                        this.closetab()
                    } else {
                        this.$Message.warning(resp.message)
                    }
                })
            } else {
                this.$api.WorkstationLedger.ledgerAdd(this.ledgerObj).then(resp => {
                    if (resp.code == 200) {
                        this.$Message.success('添加成功')
                        this.closetab()
                        this.$router.push({
                            name: 'workstation-ledger'
                        })
                    } else {
                        this.$Message.warning(resp.message)
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
.code-row-bg-ledger {
    padding: 15px 0;
}

.add-edit-detail-box {
    padding: 40px 0;
}

.center1 {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
